<script setup lang="ts">
import { updateUserInfoAPI, updateUserPhotoAPI } from '@/apis/user';
import { useUserStore } from '@/stores/userStote';
import type { UserInfoRes } from '@/types/user';
import { ElMessage, type FormInstance, type FormRules, type UploadRequestOptions } from 'element-plus';
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const userStore = useUserStore()

const form = ref<Partial<UserInfoRes>>({
  id: userStore.userInfo?.id,
  name: userStore.userInfo?.name,
  photo: userStore.userInfo?.photo,
  gender: userStore.userInfo?.gender,
  birthday: userStore.userInfo?.birthday,
  intro: userStore.userInfo?.intro,
  realName: userStore.userInfo?.realName
})
// 上传图片
const uploadFile = async (options: UploadRequestOptions) => {
  // console.log('options', options)
  const fd = new FormData()
  fd.append('photo', options.file)
  const res = await updateUserPhotoAPI(fd)
  // console.log('photo', res)
  form.value.photo = res.data.photo
}
// 表单验证规则
const rules = ref<FormRules<UserInfoRes>>({
  id: [
    { required: true, message: '请输入用户ID', trigger: 'blur' }
  ],
  name: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  photo: [
    { required: true, message: '请上传用户头像', trigger: 'blur' }
  ],
  birthday: [
    { required: true, message: '请选择生日', trigger: 'blur' }
  ],
  intro: [
    { required: true, message: '请输入个人介绍', trigger: 'blur' }
  ],
  realName: [
    { required: true, message: '请输入真实姓名', trigger: 'blur' }
  ]
})

const formRef = ref<FormInstance>()
const router = useRouter()
const onSubmit = async() => {
  try{
    await formRef.value?.validate()
    const res = await updateUserInfoAPI(form.value as UserInfoRes)
    console.log('编辑',res)
    ElMessage.success('修改成功')
    userStore.getUserInfo()
    router.push('/user')
  }catch{}

}

</script>

<template>
  <div class="user-profile">
    <el-card class="box-card">
      <template #header>
        <el-breadcrumb separator=">">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item :to="{ path:'/user' }">个人中心</el-breadcrumb-item>
          <el-breadcrumb-item>用户信息编辑</el-breadcrumb-item>
        </el-breadcrumb>
      </template>
      <el-row :gutter="0">
        <el-col :span="12">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-form-item label="用户ID" prop="id">
          <el-input v-model="form.id" disabled />
        </el-form-item>
        <el-form-item label="用户名" prop="name">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="头像" prop="photo">
          <el-upload
            action=""
            :show-file-list="false"
            :http-request="uploadFile"
          >
            <img v-if="form.photo" :src="form.photo" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.gender">
            <el-radio label="男" :value="0" />
            <el-radio label="女" :value="1" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="生日" prop="birthday">
          <el-date-picker
            v-model="form.birthday"
            type="date"
            placeholder="选择日期"
          />
        </el-form-item>
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="form.realName" />
        </el-form-item>
        <el-form-item label="个人介绍" prop="intro">
          <el-input v-model="form.intro" type="textarea" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" size="large" style="width: 200px;">保存</el-button>
        </el-form-item>
      </el-form>
      </el-col>
        <el-col :span="12">
          <div class="right">
            <img src="../../assets/hmLogo.jpg" alt="">
            <img class="right-img" src="../../assets/hmAdv.png" alt="" >
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped>
.box-card {
  padding-bottom: 50px;
}
.user-profile {
  padding: 20px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.right{
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  flex-direction: column;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  margin: 0 20px;
  border-radius: 10px;
}
.right-img{
  margin-top: 50px;
  width: 500px;
}
</style>